<template>
  <el-form
    :model="form"
    ref="form"
    :rules="rule"
    status-icon
    label-width="100px"
    label-position="left"
  >
    <el-form-item prop="account" label="关联账号">
      <el-input v-model="form.account" placeholder="手机号/邮箱"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="warning" @click="backLogin">返回</el-button>
      <el-button
        type="primary"
        :disabled="loading"
        :loading="loading"
        @click="verifyAccount('form')"
      >下一步</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { userAPI } from "@/utils/api.js";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      loading: false, //点击下一步显示加载中,并禁用
      /* 关联账号表单 */
      form: {
        account: ""
      },
      //表单验证规则
      rule: {
        account: [
          { required: true, message: "关联账号不能为空", trigger: "blur" },
          {
            pattern: /^([1][3,4,5,7,8][0-9]{9})|([a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(.[a-zA-Z0-9-]+)*.[a-zA-Z0-9]{2,6})$/, //账号正则
            message: "关联账号格式不正确,请输入手机号/邮箱",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    ...mapMutations([
      "saveFrgAccount" //vuex辅助函数 映射同名方法
    ]),
    backLogin() {
      //返回登录表单
      this.$emit("backLogin");
    },
    verifyAccount(formName) {
      /* 提交账号表单 */
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          let data = { name: this.form.account };
          userAPI.forget
            .verifyAccount(data)
            .then(res => {
              // console.log(res);
              this.$emit("nextStep"); //下一步
              this.saveFrgAccount(this.form); //账号保存为全局量
            })
            .catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false; //取消加载和禁用
            });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>